<div class="layui-fluid" lay-title="系统告警信息">
  <div class="layui-row layui-col-space15">
    <div class="layui-card">
      <div class="layui-card-header">
        <i class="layui-icon layui-icon-fire"></i>&nbsp;系统告警信息
      </div>
      <div class="layui-card-body">
        <table
          id="sys_alarm_info_list"
          lay-filter="sys_alarm_info_list"
        ></table>
      </div>
    </div>
  </div>
</div>

<!-- 工具栏 -->
<script type="text/html" id="mid_alarm_info_list_toolbar">
  <div style="display:flex;">
    <div style="font-size:25px;">
        <i class="layui-icon layui-icon-search"></i>
    </div>
    <div class="layui-input-inline" style="margin-left:20px;width:170px;height:20px">
      <input
        type="text"
        lay-verify="required"
        placeholder="CLASS"
        class="layui-input"
        id="classNameFilter"
      />
    </div>
    <div class="layui-input-inline" style="margin-left:5px;width:130px;height:20px">
      <input
          type="text"
          lay-verify="required"
          placeholder="METHOD"
          class="layui-input"
          id="methodNameFilter"
        />
    </div>
    <div class="layui-input-inline" style="margin-left:5px;width:130px;height:20px">
      <input
        type="text"
        lay-verify="required"
        placeholder="错误"
        class="layui-input"
        id="errDescFilter"
      />
    </div>
    <div class="layui-input-block" style="margin-left:5px;height:20px">
        <div class="layui-input-inline" style="width:320px;">
          <input type="text" class="layui-input" autocomplete="off" id="timeFilter" placeholder="写入时间范围过滤">
        </div>
    </div>

    <button class="layui-btn" style="margin-left:20px;" onclick="reload_sys_alarm_info_Table()">
      <i class="layui-icon layui-icon-search"></i> 搜索
    </button>
  </div>
</script>

<script>
  layui.use(["admin", "laydate", "table"], function (
    admin,
    table,
    laydate
  ) {
    var $ = layui.$;
    var table = layui.table;
    var laydate = layui.laydate;

    reload_sys_alarm_info_Table = function (obj) {
      var classNameFilterVal = $("#classNameFilter").val() || null;
      var methodNameFilterVal = $("#methodNameFilter").val() || null;
      var errDescFilterVal = $("#errDescFilter").val() || null;
      var timeFilterVal = $("#timeFilter").val() || null;

      var startTime = null;
      var endTime = null;
      if (timeFilterVal != null) {
        startTime = timeFilterVal.substr(0, 19);
        endTime = timeFilterVal.substr(22, 19);
      }

      var queryData = {
        className: classNameFilterVal,
        methodName: methodNameFilterVal,
        errDesc: errDescFilterVal,
        startTime: startTime,
        endTime: endTime,
      };

      var queryTemp = {};
      Object.keys(queryData).forEach(function (val, index) {
        if (queryData[val] != null) queryTemp[val] = queryData[val];
      });
      console.log(queryTemp);

      tableIns.reload({
        url: "common/alarm",
        where: queryTemp,
      });

      // 设置刷新后表格的查询条件
      $("#classNameFilter").val(classNameFilterVal);
      $("#methodNameFilter").val(methodNameFilterVal);
      $("#errDescFilter").val(errDescFilterVal);
      //重新渲染
      laydate.render({
        elem: "#timeFilter",
        type: "datetime",
        value: timeFilterVal,
        range: true,
        trigger: "click",
      });
    };

    table.on("row(sys_alarm_info_list)", function (obj) {
      layer.open({
        type: 1,
        area: "atuo",
        title: "流程编号【" + obj.data.appNo + "】详情",
        content:
          "<div style='padding:25px;'>" +
          "<p>原始报文:<br><pre>" +
          JSON.stringify(obj.data, null, 4) +
          "</pre></p>" +
          "</div>",
      });
    });

    // 渲染表格实例
    var tableIns = table.render({
      elem: "#sys_alarm_info_list",
      toolbar: "#mid_alarm_info_list_toolbar",
      url: "common/alarm", //数据接口
      cols: [
        [
          {
            field: "id",
            title: "ID",
            width: 80,
            unresize: "true",
            align: "center",
          },
          {
            field: "className",
            title: "CLASS",
            minWidth: 320,
            align: "center",
          },
          {
            field: "methodName",
            title: "METHOD",
            width: 230,
            align: "center",
          },
          {
            field: "errDesc",
            title: "错误描述",
            minWidth: 220,
            align: "center",
          },
          {
            field: "generateTime",
            title: "产生时间",
            width: 150,
            align: "center",
          },
        ],
      ],
    });

    // 渲染日期时间选择器
    laydate.render({
      elem: "#timeFilter",
      type: "datetime",
      range: true,
      trigger: "click",
    });
  });
</script>
